<template>
    <div class="footBar">
        <ul class="footer-list">
            <router-link v-for="(item,index) in lis" :key="index" :to="item.push" tag="li" active-class="actived">
                <img class="icon" :src="item.imgs"  alt="">
                <img class="icon active-class" :src="item.imgs2" alt="">
                <p class="i-name">{{item.ps}}</p>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            lis:[
                {
                    imgs:require('../../assets/image/storeNav/ic_homeq.png'),
                    imgs2:require('../../assets/image/storeNav/ic_homeh.png'),
                    ps:'店铺',
                    push:'/shop'
                },
                {
                    imgs:require('../../assets/image/storeNav/ic_classifyq.png'),
                    imgs2:require('../../assets/image/storeNav/ic_classifyh.png'),
                    ps:'分类',
                    push:'/claify'
                },
                {
                    imgs:require('../../assets/image/storeNav/ic_brandq.png'),
                    imgs2:require('../../assets/image/storeNav/ic_brandh.png'),
                    ps:'品牌',
                    push:'/brand'
                },
                {
                    imgs:require('../../assets/image/storeNav/ic_fileq.png'),
                    imgs2:require('../../assets/image/storeNav/ic_fileh.png'),
                    ps:'档案',
                    push:'/file'
                },
            ],
            tab:true,

        }
    },
    methods:{
        getTab(){
            this.tab = !this.tab
        }
    }
}
</script>

<style scoped lang="scss">
.footBar{
    height: 0.48rem;
    z-index: 99;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: inset 0 0 0 0 #E1E1E1;
    border-top: 1px solid #E1E1E1;
    .footer-list{
        // padding: 0 0.37rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 0.49rem;
        li{
            text-align: center;
            .icon{
                width: 0.18rem;
                height: 0.18rem;
            }
            .active-class{
                display: none;
            }
            p{
                font-size: 0.11rem;
                color: #666;
                font-weight: lighter;
            }
            
        }
        .actived {
            .i-name{
                color: #DD3333;
            }
            .icon{
                display: none;
            }
            .active-class{
                width: 0.2rem;
                height: 0.2rem;
                display: block;
            }
        }
    }
}

</style>


